<template>
  <!-- 增改交互表配置弹框 -->
  <hcDialog
    dialogWidth="50%"
    dialogTitle="PLC读取数值"
    :isVisable="options.show"
    :isFooter="true"
    @closeDialog="closeFun"
    @save="saveDialog(formRef)"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="140px"
      class="add-user-ruleForm"
      status-icon
    >
      <el-row>
        <el-col :span="12">
          <el-form-item
            :label="$t('system.interactConfig.deviceNumber')"
            prop="equipmentCode"
          >
            <el-input
              v-model="form.equipmentCode"
              :placeholder="$t('system.interactConfig.deviceNumberInfo')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('system.interactConfig.deviceName')"
            prop="equipmentName"
          >
            <el-input
              v-model="form.equipmentName"
              :placeholder="$t('system.interactConfig.deviceNameInfo')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            :label="$t('system.interactConfig.stationNumber')"
            prop="siteCode"
          >
            <el-input
              v-model="form.siteCode"
              :placeholder="$t('system.interactConfig.stationNumberInfo')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('system.interactConfig.stationName')"
            prop="siteName"
          >
            <el-input
              v-model="form.siteName"
              :placeholder="$t('system.interactConfig.stationNameInfo')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            :label="$t('system.interactConfig.dataNumber')"
            prop="dataCode"
          >
            <el-input
              v-model="form.dataCode"
              :placeholder="$t('system.interactConfig.dataNumberInfo')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('system.interactConfig.dataName')"
            prop="dataName"
          >
            <el-input
              v-model="form.dataName"
              :placeholder="$t('system.interactConfig.dataNameInfo')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            :label="$t('system.interactConfig.dataLength')"
            prop="dataLength"
          >
            <el-input
              v-model="form.dataLength"
              :placeholder="$t('system.interactConfig.dataLengthInfo')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('system.interactConfig.dataType')"
            prop="dataType"
          >
            <el-input
              v-model="form.dataType"
              :placeholder="$t('system.interactConfig.dataTypeInfo')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="category">
            <template #label>
              <el-tooltip
                :content="$t('tooltip.interactConfig.categoryTooltip')"
                placement="top"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
              <span>{{ $t("table.interactConfig.classification") }}</span>
            </template>
            <el-input
              v-model="form.category"
              :placeholder="$t('system.interactConfig.classificationInfo')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('system.interactConfig.collectionFrequency')"
            prop="interval"
          >
            <el-input-number
              v-model="form.interval"
              controls-position="right"
              :min="0"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            :label="$t('system.interactConfig.SpcOrNot')"
            prop="isSpc"
          >
            <el-radio-group v-model="form.isSpc">
              <el-radio :label="true">{{ $t("common.yes") }}</el-radio>
              <el-radio :label="false">{{ $t("common.no") }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('system.interactConfig.PLCAddress')"
            prop="plcAddress"
          >
            <el-input
              v-model="form.plcAddress"
              :placeholder="$t('system.interactConfig.PLCAddressInfo')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            :label="$t('system.interactConfig.arrayNumber')"
            prop="parentCode"
          >
            <el-input
              v-model="form.parentCode"
              :placeholder="$t('system.interactConfig.arrayNumberInfo')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('system.interactConfig.arrayIndex')"
            prop="index"
          >
            <el-input-number
              v-model="form.index"
              controls-position="right"
              :min="0"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            :label="$t('system.interactConfig.orderBy')"
            prop="orderBy"
          >
            <el-input-number
              v-model="form.orderBy"
              controls-position="right"
              :min="0"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </hcDialog>
</template>

<script setup name="TenantDialog">
import { reactive, ref, toRefs, watch } from "vue";
import { useI18n } from "vue-i18n";

const { t: $t } = useI18n();
const emit = defineEmits(["onSure", "onCancel"]);

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        show: false,
        type: "add", // 用于判断是编辑还是删除 add edit
        curEqui: null, // 当前编辑的交互表
      };
    },
  },
});

const formRef = ref();

const data = reactive({
  form: {
    equipmentCode: "",
    equipmentName: "",
    siteCode: "",
    siteName: "",
    dataCode: "",
    dataName: "",
    dataLength: "",
    dataType: "",
    category: "",
    interval: 0,
    isSpc: true,
    plcAddress: "",
    parentCode: "",
    index: 0,
    orderBy: 0,
  },
  rules: {
    equipmentCode: [
      {
        required: true,
        message: $t("system.interactConfig.deviceNumberInfo"),
        trigger: "blur",
      },
    ],
    equipmentName: [
      {
        required: true,
        message: $t("system.interactConfig.deviceNameInfo"),
        trigger: "blur",
      },
    ],
    dataCode: [
      {
        required: true,
        message: $t("system.interactConfig.dataNumberInfo"),
        trigger: "blur",
      },
    ],
    dataName: [
      {
        required: true,
        message: $t("system.interactConfig.dataNameInfo"),
        trigger: "blur",
      },
    ],
    dataType: [
      {
        required: true,
        message: $t("system.interactConfig.dataTypeInfo"),
        trigger: "blur",
      },
    ],
    category: [
      {
        required: true,
        message: $t("system.interactConfig.classificationInfo"),
        trigger: "blur",
      },
    ],
    isSpc: [
      {
        required: true,
        message: $t("system.interactConfig.spcInfo"),
        trigger: "blur",
      },
    ],
    orderBy: [
      {
        required: true,
        message: $t("system.interactConfig.orderInfo"),
        trigger: "blur",
      },
    ],
  },
});

// 添加、修改设备
const saveDialog = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      let category = data.form.category;
      const arr =
        typeof category === "string"
          ? category?.split(",").map(Number)
          : category;
      data.form.category = arr;
      emit("onSure", {
        form: JSON.parse(JSON.stringify(data.form)),
        type: props.options.type,
        id: props.options.curEqui?.id,
      });
      closeFun();
    }
  });
};

// 关闭弹框
const closeFun = () => {
  data.form = {
    equipmentCode: "",
    equipmentName: "",
    siteCode: "",
    siteName: "",
    dataCode: "",
    dataName: "",
    dataLength: "",
    dataType: "",
    category: "",
    interval: 0,
    isSpc: true,
    plcAddress: "",
    parentCode: "",
    index: 0,
    orderBy: 0,
  };
  formRef.value.resetFields();
  emit("onCancel");
};

watch(
  () => props.options,
  (val) => {
    if (val.type === "edit") {
      const curEqui = JSON.parse(JSON.stringify(val.curEqui));
      for (let key in data.form) {
        data.form[key] = curEqui[key];
      }
    }
  },
  { deep: true }
);

const { form, rules } = toRefs(data);
</script>

<style lang="scss">
.interact-dialog.el-dialog {
  .add-user-ruleForm {
    padding: 0 20px 0 0;
    .el-form-item__label {
      flex: none;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    .el-form-item__content {
      .el-select,
      .el-input,
      .el-input-number {
        flex: none;
        width: 100%;
      }
    }
  }
}
</style>
